/** @jsxImportSource @emotion/react */
import * as React from "react";
import {CCell, Table, TableBody, TableRow, Text, TableHead, Cell,} from "customize-easy-ui-component";
import {useMeasureTable} from "../../hook/useMeasure";
import {useJudgmentTable} from "../../hook/useJudgment";
import {RepLink} from "../../common/base";

/**测量模型参数  vlNe 和 omit 配合大变更：vlNe可以用于输入编辑器融合，不仅仅是斜杠融合了。
 * 表头：标题的名称都不一样了：
 * @property config : 配置 测量数据
 * @property crit : 真的有“判断标准”这个列的， 默认没有；
 * */
export const MeasurePortalVw= ({ orc, rep,label,config,children,fixed=["4%","3%","%","13%","21%","5.5%","12%","10%","8%"],tag='Measure',
                                 nseq,crit, mem, xcls=3} :
                 { orc: any, rep: any,label:string,config:any,children?:any,fixed?:string[],tag?:string,
                   nseq?:boolean,crit?:boolean,mem?: string,xcls?:number}
) => {
  //返回render的栏目span数量不一定？
  const renderMeasure=useJudgmentTable({rep,orc, config,nseq});
  const 观测备注: string[] = mem ? orc?.[mem] : '';
  const bzSpan=fixed.length-1;
  return <>
    <Text variant="h4" css={{marginTop: '1rem', "@media print": {paddingBottom: '5rem', pageBreakInside: 'avoid'}
    }}>{label}</Text>
    <Table id={tag} fixed={ fixed } tight  miniw={800} css={ {borderCollapse: 'collapse', "@media print": {marginTop: '-5rem'}} } >
      <TableHead>
        <TableRow>
          {!nseq &&<CCell><Text css={{fontSize:'0.7rem'}}>序号</Text></CCell>}
          <CCell><Text css={{fontSize:'0.7rem'}}>项目编号</Text></CCell><CCell colSpan={xcls}>检验项目</CCell>
          <CCell>单位</CCell>{crit && <CCell>判断标准</CCell>}
          <CCell>观测值</CCell><CCell>结果值</CCell><CCell><Text css={{fontSize:'0.7rem'}}>检验结果</Text></CCell>
        </TableRow>
      </TableHead>
      <TableBody>
        <RepLink ori rep={rep} tag={tag}>
          {renderMeasure}
          {mem  &&  <TableRow>
            <CCell>备注</CCell>
            <Cell colSpan={bzSpan}>
              <div css={{minHeight: '1rem', whiteSpace: 'pre-wrap'}}>
                {观测备注 || '／'}
              </div>
            </Cell>
          </TableRow>
          }
        </RepLink>
      </TableBody>
    </Table>
    {children}
  </>;
};
/**安全距离记录 ；报告可打印的 测量：支持更大可能的复用性。 用了Hook就需要正规的React组件模式来做。
 *  @param children  直接作为嵌套的组件也能传递过来的。
 * */
export const MeasureDistanceVw= ({children, orc, rep,label,config,tag='SafeDistance',mem,fixed=["3%","28%","13%","%","10%","5%","10%","8%","6%"] } :
                { orc: any, rep: any,label:string, children: any,config:any[],tag?:string,mem?: string,fixed?:string[]}
) => {
  const renderMeasure=useMeasureTable({rep,orc, config: config });
  const 观测备注: string[] = mem ? orc?.[mem] : '';
  return <>
    <Text variant="h4" css={{marginTop: '1rem', "@media print": {paddingBottom: '5rem', pageBreakInside: 'avoid'}
    }}>{label}</Text>
    <Table id={tag} fixed={ fixed } css={ {borderCollapse: 'collapse', "@media print": {marginTop: '-5rem'}} } tight miniw={800}>
      <TableHead>
        <TableRow>
          <CCell><Text css={{fontSize:'0.8rem'}}>序号</Text></CCell><CCell colSpan={4}>检验项目</CCell>
          <CCell>单位</CCell><CCell>观测值</CCell><CCell>结果值</CCell><CCell><Text css={{fontSize:'0.8rem'}}>检验结果</Text></CCell>
        </TableRow>
      </TableHead>
      <TableBody>
        <RepLink ori rep={rep} tag={'SafeDistance'}>
          {renderMeasure}
          <TableRow>
            <CCell>备注</CCell>
            <Cell colSpan={8}>
              <div css={{minHeight: '1rem', whiteSpace: 'pre-wrap'}}>
                {观测备注 || '／'}
              </div>
            </Cell>
          </TableRow>
        </RepLink>
      </TableBody>
    </Table>
    { children }
  </>;
};
